<template>
	<view class="xq">
		<view v-for="(item,i) in userDetail" :key="i">
			<view class="s">
				<image :src="item.avatar_url" style="width: 170rpx;height: 170rpx;border-radius: 50%;"></image>
				<view>{{item.username}}</view>
				<view style="color: #007AFF;font-size: 20rpx;">教师</view>
			</view>

			<view class="z">
				<view class="one">
					<view class="tx">性别</view>
				</view>
				<view class="count" v-if="item.gender==0">男</view>
				<view class="count" v-else>女</view>
				<view class="one">
					<text class="tx">入职年月</text>
				</view>
				<view class="count" v-text="formatDate(item.work_date)">2017</view>
				<view class="one">
					<view class="tx">所属系别/科室</view>
				</view>
				<view class="count" v-text="item.facName">全日制</view>
				<view class="one">
					<view class="tx">工作单位</view>
				</view>
				<view class="count" v-text="item.work_unit" >17软件工程1班</view>
			</view>
			<view class="one">
				<view class="tx">联系电话</view>
			</view>
			<view class="count" v-text="item.phone">贵阳</view>
			<view class="x" v-if="userId != user_id">
				<view class="an" v-if="contactId==0">
					<button class="exchange" type="primary" plain="true" @click="addFriend()">申请交换名片</button>
				</view>
				<view class="an" v-else>
					<button class="exchange" type="default" plain="true">已申请交换名片</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				userDetail: [], //用户详情信息
				user_id: '', //用户id
			}
		},
		computed: {
			...mapState(['userId', 'token'])
		},
		onLoad(option) {
			let that = this;
			that.user_id = option.id;
			uni.request({
					url: app.globalData.URL + 'associationUserInfo/associationUserTeaDetail?id=' + this.user_id,
					header: {
						'content-type': 'application/json;charset=UTF-8' // 默认值
					},
					method: 'GET'
				})
				.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
					var [error, res] = data;
					console.log("成功连接!!");
					console.log(res.data);
					that.userDetail = res.data;
				});
			uni.request({
					url: app.globalData.URL + 'gzmuAnnUserContacts/findByMyId',
					data: {
						myId: that.userId,
						userId: that.user_id
					},
					header: {
						'content-type': 'application/json;charset=UTF-8' // 默认值
					},
					method: 'GET'
				})
				.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
					var [error, res] = data;
					console.log("onLoad", res.data);
					that.contactId = res.id;
				});
		},
		methods: {
			//日期转换方法
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				return y + '年';
			},
			addFriend(){
				let that = this;
				let params = {
					url: 'gzmuAnnUserContacts/createByUserId',
					type: 'POST',
					data: {
						myId: that.userId,
						userId: that.user_id
					},
					sCallback: function(res) {
						console.log("toJoin", res);
						that.contactId = res.id;
						if (that.contactId > 0){
							uni.showToast({
								title: "申请名片成功",
								icon: 'none',
								duration: 2000
							});
						}
					}
				}
				app.request(params);
			}
			
		}
	}
</script>

<style>
	.xq {
		height: 100%;
		width: 100%;
	}

	.im {
		margin-top: 50rpx;
		margin-left: 41%;
	}

	.mz {
		font-size: 33rpx;
		margin-top: 10rpx;
		margin-left: 45%;
	}

	.lx {
		margin-top: 5rpx;
		margin-left: 50%;
		font-size: 20rpx;
		color: #808080;
	}

	.nu {
		color: #007AFF;
	}

	.z {
		width: 100%;
		height: 60%;
	}

	.one {
		width: 100%;
		height: 46rpx;
		font-size: 28rpx;
		margin-top: 24rpx;
		align-items: center;
		border-bottom: 1rpx solid #C0C0C0;
		display: flex;
	}

	.tx {
		margin-left: 20rpx;
		color: #999999;
	}

	.count {
		font-size: 28rpx;
		text-align: right;
		margin-right: 20rpx;
		margin-top: -40rpx;

	}

	.an {
		margin-left: 30%;
		margin-top: 28rpx;
		width: 350rpx;
		border-radius: 100rpx;
	}

	.exchange {
		border-radius: 100rpx;
		height: 70rpx;
		font-size: 26rpx;
	}

	.s {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
